<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scrollTop的使用</title>
  <script src="./js/jquery.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .cls {
      width: 100px;
      height: 100px;
      overflow: auto;
    }

    html {
      height: 200%;
    }
  </style>
</head>
<!-- 
  scrollTop
  scrollLeft
    获取到元素滚动的偏移位置
    也可以设置位置
  
  获取网页的偏移位置(兼容IE浏览器)
    console.log($("html").scrillTop()+$("body").scrollTop());
 -->

<body>
  <div class="cls">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet, cumque dicta. Atque quasi ipsam explicabo enim
    aspernatur perferendis quae tempore animi voluptatum, similique ratione in et vitae eligendi qui natus?
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet, cumque dicta. Atque quasi ipsam explicabo enim
    aspernatur perferendis quae tempore animi voluptatum, similique ratione in et vitae eligendi qui natus?
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet, cumque dicta. Atque quasi ipsam explicabo enim
    aspernatur perferendis quae tempore animi voluptatum, similique ratione in et vitae eligendi qui natus?
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet, cumque dicta. Atque quasi ipsam explicabo enim
    aspernatur perferendis quae tempore animi voluptatum, similique ratione in et vitae eligendi qui natus?
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet, cumque dicta. Atque quasi ipsam explicabo enim
    aspernatur perferendis quae tempore animi voluptatum, similique ratione in et vitae eligendi qui natus?
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet, cumque dicta. Atque quasi ipsam explicabo enim
    aspernatur perferendis quae tempore animi voluptatum, similique ratione in et vitae eligendi qui natus?
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet, cumque dicta. Atque quasi ipsam explicabo enim
    aspernatur perferendis quae tempore animi voluptatum, similique ratione in et vitae eligendi qui natus?
  </div>
  <button>获取</button>
  <button>设置</button>
</body>
<script>
  "use strict";
  $(function () {
    $("button").eq(0).click(function () {
      let i = $(".cls").scrollLeft();
      let j = $(".cls").scrollTop();
      console.log(i);
      console.log(j);
      let k = $("html").scrollTop();
      console.log(k);
    });
    $("button").eq(1).click(function () {
      $(".cls").scrollTop(600);
      // 为了保证浏览器的兼容性，得要这么写
      $("html,body").scrollTop(300);
    });
  });
</script>

</html>